<!-- 司机信息完善 -->
<template>
  <view class="register-box">
    <view class="colorFA6400">
      系统提示：身份证拍照上传后可自动补全身份信息，请仔细核对
    </view>
    <u-form :model="form" ref="uForm" :label-width="290">
      <view class="card-box">
        <view class="u-flex">
          身份信息
          <view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <div class="u-flex top-box">
          <u-form-item class="width-50" label-position="top" :border="0">
            <u-upload
              :deletable="
                auditStatus == '2' || auditStatus === null ? true : false
              "
              class="uUpload1-box"
              ref="uUpload1"
              :custom-btn="true"
              :action="uploadUrl1"
              @on-success="idcardFrontPicsuccess"
              @on-remove="idcardFrontPicremove"
              @on-error="testerror"
              :show-progress="form.idcardFrontPic ? false : true"
              :upload-text="'拍摄身份证人像面'"
              max-count="1"
              :width="325"
              :height="240"
              :form-data="uploaderData1"
              ><view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <image class="slot-img" src="../../static/upload-bg1.png" />
                <view class="slot-name">拍摄身份证人像面</view>
              </view>
            </u-upload>
            <image
              v-if="idcardEditable"
              :src="uploadIconList[0].icon"
              style="
                width: 40rpx;
                height: 40rpx;
                display: inline;
                position: absolute;
                bottom: 30rpx;
                right: 10rpx;
              "
            />
            <div
              v-if="
                idcardFrontPicremoveFlag &&
                form.idcardFrontPic &&
                auditStatus != null &&
                auditStatus != '0'
              "
              class="toexamine-box"
            >
              <div v-if="!toExamineIndexOf('身份证正面')">
                <image
                  :src="uploadIconList[1].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
              <div v-else>
                <image
                  :src="uploadIconList[2].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
            </div>
            <div
              v-if="
                idcardFrontPicremoveFlag &&
                form.idcardFrontPic &&
                auditStatus != null &&
                auditStatus == '0'
              "
              class="toexamine-box"
            >
              <image
                :src="uploadIconList[3].icon"
                style="
                  width: 98rpx;
                  height: 96rpx;
                  display: inline;
                  position: absolute;
                  bottom: 142rpx;
                  left: 0rpx;
                "
              />
            </div>
          </u-form-item>
          <u-form-item class="width-50" label-position="top">
            <u-upload
              :deletable="
                auditStatus == '2' || auditStatus === null ? true : false
              "
              :custom-btn="true"
              class="uUpload2-box"
              ref="uUpload2"
              :action="uploadUrl1"
              @on-success="idcardBackPicsuccess"
              @on-remove="idcardBackPicremove"
              @on-error="testerror"
              :show-progress="form.idcardBackPic ? false : true"
              :upload-text="'拍摄身份证国徽面'"
              max-count="1"
              :width="325"
              :height="240"
              :form-data="uploaderData2"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <image class="slot-img" src="../../static/upload-bg2.png" />
                <view class="slot-name">拍摄身份证国徽面</view>
              </view></u-upload
            >
            <image
              v-if="idcardBackEditable"
              :src="uploadIconList[0].icon"
              style="
                width: 40rpx;
                height: 40rpx;
                display: inline;
                position: absolute;
                bottom: 30rpx;
                right: 10rpx;
              "
            />
            <div
              v-if="
                idcardBackPicremoveFlag &&
                form.idcardBackPic &&
                auditStatus != null &&
                auditStatus != '0'
              "
              class="toexamine-box"
            >
              <div v-if="!toExamineIndexOf('身份证反面')">
                <image
                  :src="uploadIconList[1].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
              <div v-else>
                <image
                  :src="uploadIconList[2].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
            </div>
            <div
              v-if="
                idcardBackPicremoveFlag &&
                form.idcardBackPic &&
                auditStatus != null &&
                auditStatus == '0'
              "
              class="toexamine-box"
            >
              <image
                :src="uploadIconList[3].icon"
                style="
                  width: 98rpx;
                  height: 96rpx;
                  display: inline;
                  position: absolute;
                  bottom: 142rpx;
                  left: 0rpx;
                "
              />
            </div>
          </u-form-item>
        </div>
        <u-form-item label="姓名" ref="driverName" prop="driverName" required>
          <u-input
            :disabled="
              auditStatus == '2' || auditStatus === null ? false : true
            "
            v-model="form.driverName"
            placeholder="请输入姓名"
          />
        </u-form-item>
        <u-form-item ref="idcardNo" prop="idcardNo" label="身份证号" required>
          <u-input
            :disabled="
              auditStatus == '2' || auditStatus === null ? false : true
            "
            v-model="form.idcardNo"
            :maxlength="18"
            placeholder="请填写身份证号"
            @on-blur="upperCase"
          />
        </u-form-item>
        <u-form-item
          ref="idcardDueAt"
          prop="idcardDueAt"
          label="到期日期"
          required
        >
          <view class="idcardDueAt-box">
            <u-input
              type="select"
              v-model="form.idcardDueAt"
              @click="
                if (auditStatus == null || auditStatus == '2')
                  idcardDueAtShow = true
              "
              placeholder="请填写到期日期"
            />
            <u-button
              v-if="auditStatus == null || auditStatus == '2'"
              type="primary"
              size="mini"
              @click="idcardDueAtBtn"
            >
              长期
            </u-button>
          </view>
          <u-picker
            v-model="idcardDueAtShow"
            mode="time"
            @confirm="handleidcardDueAtConfirm"
            :default-time="form.idcardDueAt"
            :show-time-tag="false"
          ></u-picker>
        </u-form-item>
        <u-form-item
          ref="driverSexName"
          prop="driverSexName"
          label="司机性别"
          required
        >
          <u-input
            v-model="form.driverSexName"
            type="select"
            @click="
              if (auditStatus == null || auditStatus == '2')
                driverSexSelectShow = true
            "
            placeholder="请选择司机性别"
          />
          <u-select
            v-model="driverSexSelectShow"
            mode="single-column"
            :list="driverSexList"
            @confirm="driverSexConfirm"
          ></u-select>
        </u-form-item>
      </view>
      <view class="card-box">
        <view class="u-flex">
          驾驶信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <div class="u-flex top-box">
          <u-form-item class="width-50" label-position="top">
            <u-upload
              :deletable="
                auditStatus == '2' || auditStatus === null ? true : false
              "
              :custom-btn="true"
              class="uUpload1-box"
              ref="uUpload3"
              :action="uploadUrl3"
              @on-success="licenseFrontPicsuccess"
              @on-remove="licenseFrontPicmove"
              @on-error="testerror"
              :show-progress="form.licenseFrontPic ? false : true"
              :upload-text="'驾驶证正页'"
              max-count="1"
              :width="325"
              :height="240"
              :form-data="uploaderData3"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <image class="slot-img" src="../../static/upload-bg3.png" />
                <view class="slot-name">驾驶证正页</view>
              </view>
            </u-upload>
            <image
              v-if="licenseFrontPicEditable"
              :src="uploadIconList[0].icon"
              style="
                width: 40rpx;
                height: 40rpx;
                display: inline;
                position: absolute;
                bottom: 30rpx;
                right: 10rpx;
              "
            />
            <div
              v-if="
                licenseFrontPicremoveFlag &&
                form.licenseFrontPic &&
                auditStatus != null &&
                auditStatus != '0'
              "
              class="toexamine-box"
            >
              <div v-if="!toExamineIndexOf('驾驶证正页')">
                <image
                  :src="uploadIconList[1].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
              <div v-else>
                <image
                  :src="uploadIconList[2].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
            </div>
            <div
              v-if="
                licenseFrontPicremoveFlag &&
                form.licenseFrontPic &&
                auditStatus != null &&
                auditStatus == '0'
              "
              class="toexamine-box"
            >
              <image
                :src="uploadIconList[3].icon"
                style="
                  width: 98rpx;
                  height: 96rpx;
                  display: inline;
                  position: absolute;
                  bottom: 142rpx;
                  left: 0rpx;
                "
              />
            </div>
          </u-form-item>
          <u-form-item class="width-50" label-position="top">
            <u-upload
              :deletable="
                auditStatus == '2' || auditStatus === null ? true : false
              "
              :custom-btn="true"
              class="uUpload2-box"
              ref="uUpload4"
              :action="uploadUrl2"
              @on-success="licenseSubPicsuccess"
              @on-remove="licenseSubPicmove"
              @on-error="testerror"
              :show-progress="form.licenseSubPic ? false : true"
              :upload-text="'驾驶证副页'"
              max-count="1"
              :width="325"
              :height="240"
              :form-data="uploaderData3"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <image class="slot-img" src="../../static/upload-bg4.png" />
                <view class="slot-name">驾驶证副页</view>
              </view>
            </u-upload>
            <image
              v-if="licenseSubPicEditable"
              :src="uploadIconList[0].icon"
              style="
                width: 40rpx;
                height: 40rpx;
                display: inline;
                position: absolute;
                bottom: 30rpx;
                right: 10rpx;
              "
            />
            <div
              v-if="
                licenseSubPicremoveFlag &&
                form.licenseSubPic &&
                auditStatus != null &&
                auditStatus != '0'
              "
              class="toexamine-box"
            >
              <div v-if="!toExamineIndexOf('驾驶证副页')">
                <image
                  :src="uploadIconList[1].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
              <div v-else>
                <image
                  :src="uploadIconList[2].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
            </div>
            <div
              v-if="
                licenseSubPicremoveFlag &&
                form.licenseSubPic &&
                auditStatus != null &&
                auditStatus == '0'
              "
              class="toexamine-box"
            >
              <image
                :src="uploadIconList[3].icon"
                style="
                  width: 98rpx;
                  height: 96rpx;
                  display: inline;
                  position: absolute;
                  bottom: 142rpx;
                  left: 0rpx;
                "
              />
            </div>
          </u-form-item>
        </div>
        <u-form-item label="准驾车型" prop="licensePermitLabel" required>
          <u-input
            type="select"
            @click="
              if (auditStatus == '2' || auditStatus === null)
                licensePermit = true
            "
            v-model="form.licensePermitLabel"
            placeholder="请选择准驾车型"
          />
          <u-select
            v-model="licensePermit"
            mode="single-column"
            :list="carTypeList"
            @confirm="licensePermitConfirm"
          ></u-select>
        </u-form-item>
        <u-form-item
          ref="licenseDueAt"
          prop="licenseDueAt"
          label="到期日期"
          required
        >
          <view class="idcardDueAt-box">
            <u-input
              type="select"
              v-model="form.licenseDueAt"
              @click="
                if (auditStatus == '2' || auditStatus === null)
                  licenseDueAtShow = true
              "
              placeholder="请填写到期日期"
            />
            <u-button
              v-if="auditStatus == '2' || auditStatus === null"
              type="primary"
              size="mini"
              @click="licenseDueAtBtn"
            >
              长期
            </u-button>
          </view>
          <u-picker
            v-model="licenseDueAtShow"
            mode="time"
            @confirm="handlelicenseDueAtConfirm"
            :default-time="form.licenseDueAt"
            :show-time-tag="false"
          ></u-picker>
        </u-form-item>
        <u-form-item
          ref="licenseIssue"
          prop="licenseIssue"
          label="发证机关"
          required
        >
          <u-input
            type="textarea"
            :disabled="
              auditStatus == '2' || auditStatus === null ? false : true
            "
            v-model="form.licenseIssue"
            placeholder="请填写发证机关"
          />
        </u-form-item>
      </view>
      <view class="card-box">
        <view class="u-flex">
          从业资格证
          <view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <div class="u-flex top-box">
          <u-form-item class="width-50" label-position="top">
            <u-upload
              :deletable="
                auditStatus == '2' || auditStatus === null ? true : false
              "
              :custom-btn="true"
              class="uUpload2-box"
              ref="uUpload5"
              :action="uploadUrl2"
              @on-success="certificatePicsuccess"
              @on-remove="certificatePicremove"
              @on-error="testerror"
              :show-progress="form.certificatePic ? false : true"
              :upload-text="'从业资格证'"
              max-count="1"
              :width="325"
              :height="240"
              :form-data="uploaderData2"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <image class="slot-img" src="../../static/end.png" />
                <view class="slot-name">从业资格证</view>
              </view>
            </u-upload>
            <image
              v-if="certificatePicEditable"
              :src="uploadIconList[0].icon"
              style="
                width: 40rpx;
                height: 40rpx;
                display: inline;
                position: absolute;
                bottom: 30rpx;
                right: 10rpx;
              "
            />
            <div
              v-if="
                certificatePicremoveFlag &&
                form.certificatePic &&
                auditStatus != null &&
                auditStatus != '0'
              "
              class="toexamine-box"
            >
              <div v-if="!toExamineIndexOf('从业资格证')">
                <image
                  :src="uploadIconList[1].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
              <div v-else>
                <image
                  :src="uploadIconList[2].icon"
                  style="
                    width: 120rpx;
                    height: 120rpx;
                    display: inline;
                    position: absolute;
                    bottom: 120rpx;
                    left: 0rpx;
                  "
                />
              </div>
            </div>
            <div
              v-if="
                certificatePicremoveFlag &&
                form.certificatePic &&
                auditStatus != null &&
                auditStatus == '0'
              "
              class="toexamine-box"
            >
              <image
                :src="uploadIconList[3].icon"
                style="
                  width: 98rpx;
                  height: 96rpx;
                  display: inline;
                  position: absolute;
                  bottom: 142rpx;
                  left: 0rpx;
                "
              />
            </div>
          </u-form-item>
        </div>
      </view>
      <view class="card-box">
        <view class="u-flex">
          电子签名
          <view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <div class="u-flex top-box">
          <u-form-item class="width-50" label-position="top">
            <view
              v-if="!form.driverSign"
              class="slot-btn"
              @click="handleGoSign"
              hover-class="slot-btn__hover"
              hover-stay-time="150"
            >
              <image class="sign-icon" src="../../static/sign.png" />
              <view class="slot-name">电子签名</view>
            </view>
            <image
              @click="handleGoSign"
              class="sign-img"
              v-else
              :src="driverSign"
            />
          </u-form-item>
        </div>
      </view>
    </u-form>
    <u-button
      v-if="auditStatus == null || auditStatus == '2'"
      type="primary"
      @click="submit"
      throttle-time="0"
      class="vehiclemanagement-index-btn"
      style="margin: 50rpx 0 10rpx 0"
    >
      提交
    </u-button>
    <u-button
      v-if="
        (auditStatus == 0 || auditStatus == '1') &&
        !userInfo.driverRealNameStatus
      "
      type="primary"
      @click="showAuthModal = true"
      throttle-time="0"
      style="margin: 50rpx 0 10rpx 0"
    >
      实名认证
    </u-button>
    <u-modal
      v-model="showModal"
      :width="'560'"
      :show-confirm-button="false"
      :show-title="false"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <view style="padding: 30rpx">
        <view
          style="
            font-weight: bold;
            padding: 10rpx 0 0 20rpx;
            text-align: center;
          "
          >信息确认
        </view>
      </view>
      <view class="modal-content">
        <view class="section">
          <view class="title">
            <view class="title-text">个人信息</view>
            <image src="../../static/title-icon.png" class="title-icon" />
          </view>
          <view class="content">
            <view class="item">
              <view class="item-name">姓名：</view>
              <view class="item-desc">{{ submitObj.driverName }}</view>
            </view>
            <view class="item">
              <view class="item-name">身份证号：</view>
              <view class="item-desc">{{ submitObj.idcardNo }}</view>
            </view>
            <view class="item">
              <view class="item-name">到期时间：</view>
              <view class="item-desc">{{ submitObj.idcardDueAt }}</view>
            </view>
          </view>
        </view>
        <view class="section">
          <view class="title">
            <view class="title-text">驾驶信息</view>
            <image src="../../static/title-icon.png" class="title-icon" />
          </view>
          <view class="content">
            <view class="item">
              <view class="item-name">准驾车型：</view>
              <view class="item-desc">{{ submitObj.licensePermitLabel }}</view>
            </view>
            <view class="item">
              <view class="item-name">到期时间：</view>
              <view class="item-desc">{{ submitObj.licenseDueAt }}</view>
            </view>
            <view class="item">
              <view class="item-name">发证机关：</view>
              <view class="item-desc">{{ submitObj.licenseIssue }}</view>
            </view>
          </view>
        </view>
        <view class="section">
          <view class="title">
            <view class="title-text">从业资格证</view>
            <image src="../../static/title-icon.png" class="title-icon" />
          </view>
          <view class="content">
            <image :src="submitObjcertificatePic" class="item-img" />
          </view>
        </view>
      </view>
      <view
        style="
          display: flex;
          justify-content: space-around;
          padding-bottom: 20rpx;
        "
      >
        <u-button
          type="primary"
          shape="circle"
          plain
          throttle-time="0"
          style="width: 224rpx"
          @click="handleCancel"
          >取 消
        </u-button>
        <u-button
          type="primary"
          shape="circle"
          :disabled="confirmTime > 0"
          style="width: 224rpx"
          @click="handleConfirm"
        >
          {{ `确定${confirmTime > 0 ? confirmTime + 's' : ''}` }}
        </u-button>
      </view>
    </u-modal>
    <u-modal
      v-model="showAuthModal"
      :width="'560'"
      :mask-close-able="true"
      :show-confirm-button="false"
      title="认证方式"
    >
      <view style="margin-left: 20rpx; margin-top: 20rpx"
        >认证的方式您可以选择人脸识别或者短信验证：</view
      >
      <view class="auth-box">
        <view class="auth-item" @click="handleAuth">
          <image
            style="width: 80rpx; height: 80rpx; margin: 20rpx 0"
            src="../../static/face-auth.png"
          />
          <view>人脸识别</view>
        </view>
        <view
          class="auth-item"
          style="margin-left: 100rpx"
          @click="handleNoteAuth"
        >
          <image
            style="width: 80rpx; height: 80rpx; margin: 20rpx 0"
            src="../../static/note-auth.png"
          />
          <view>短信验证</view>
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>
import httpEnum from '../../common/httpEnum.js'
export default {
  data() {
    return {
      showAuthModal: false,
      idcardDueAtShow: false,
      licenseDueAtShow: false,
      confirmTime: 6,
      showModal: false,
      idcardEditable: false,
      idcardBackEditable: false,
      licenseFrontPicEditable: false,
      licenseSubPicEditable: false,
      certificatePicEditable: false,
      userInfo: {},
      getCodeDisabled: false,
      auditStatus: null,
      show: true,
      count: '',
      timer: null,
      uploadUrl:
        httpEnum.baseUploadUrl +
        '/freight-business/ocr/recognize/drivingLicense',
      uploaderData: {
        bucketName: 'app',
        folderName: 'drivingLicense',
      },
      uploadUrl1:
        httpEnum.baseUploadUrl + '/freight-business/ocr/recognize/idcard',
      uploadUrl2: httpEnum.baseUploadUrl + '/freight-business/file/app/upload',
      uploadUrl3:
        httpEnum.baseUploadUrl +
        '/freight-business/ocr/recognize/drivingLicense',
      uploaderData1: {
        bucketName: 'logistics-control-platform',
        folderName: 'driverPic',
        type: 'face',
      },
      uploaderData2: {
        bucketName: 'logistics-control-platform',
        folderName: 'driverPic',
        type: 'back',
      },
      uploaderData3: {
        bucketName: 'logistics-control-platform',
        folderName: 'driverPic',
      },
      fleetNameShow: false,
      fleetNamelist: [],
      driverSexSelectShow: false,
      driverSexList: [
        {
          label: '男',
          value: 1,
        },
        {
          label: '女',
          value: 2,
        },
      ],
      form: {
        id: undefined,
        idcardFrontPic: undefined, //身份证正面
        idcardBackPic: undefined, //身份证反面
        driverName: undefined, //姓名
        idcardNo: undefined, //身份证号
        idcardDueAt: undefined, //到期日期
        licenseFrontPic: undefined, //驾驶证正页
        licenseDueAt: undefined, //到期日期
        creditCode: undefined, // 信用代码
        legalPersonName: undefined, // 法人姓名
        corporateIdNumber: undefined, //驾驶证正页号
        companyAddress: undefined, //公司地址
        corporateName: undefined, //公司名称
        licenseSubPic: undefined, //驾驶证副页
        driverSign: undefined, // 电子签名
        licenseIssue: undefined,
        driverSex: undefined, //司机性别
        driverSexName: undefined, //司机性别-名字
      },
      rules: {
        driverName: [
          {
            required: true,
            message: '请填写姓名',
            trigger: ['change', 'blur'],
          },
        ],
        licensePermitLabel: [
          {
            required: true,
            message: '请选择准驾车型',
            trigger: ['change', 'blur'],
          },
        ],
        licenseDueAt: [
          {
            required: true,
            message: '请选择到期日期',
            trigger: ['change', 'blur'],
          },
        ],
        licenseIssue: [
          {
            required: true,
            message: '请填写发证机关',
            trigger: ['change', 'blur'],
          },
        ],
        idcardDueAt: [
          {
            required: true,
            message: '请选择到期日期',
            trigger: ['change', 'blur'],
          },
        ],
        driverSexName: [
          {
            required: true,
            message: '请选择司机性别',
            trigger: ['change', 'blur'],
          },
        ],
        creditCode: [
          {
            required: true,
            message: '请输入信用代码',
            trigger: ['change', 'blur'],
          },
          {
            type: 'string',
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
            message: '请输入正确的信用代码',
            trigger: ['change', 'blur'],
          },
        ],
        idcardNo: [
          {
            required: true,
            message: '身份证号码不能为空',
            trigger: 'blur',
          },
          {
            type: 'string',
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的身份证号',
            trigger: ['change', 'blur'],
          },
        ],
        corporateIdNumber: [
          {
            required: true,
            message: '驾驶证正页号码不能为空',
            trigger: 'blur',
          },
          {
            type: 'string',
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的驾驶证正页号',
            trigger: ['change', 'blur'],
          },
        ],
      },
      maxSize: 1024 * 1024 * 4,
      deletableTextList: [], //数组
      ids: undefined,
      idcardFrontPicremoveFlag: true, //身份证正面删除标识
      idcardBackPicremoveFlag: true, //身份证反面删除标识
      licenseFrontPicremoveFlag: true, //驾驶证正页删除标识
      licenseSubPicremoveFlag: true, //驾驶证副页删除标识
      certificatePicremoveFlag: true, //从业资格证删除标识
      uploadIconList: [
        {
          icon: 'https://minio.wskjwl.com/uipicture/correcticon.png',
          path: '/pages/vehiclemanagement/vehiclemanagement',
          title: '完成标识',
        },
        {
          icon: 'https://minio.wskjwl.com/uipicture/uploadpass.png',
          path: '/pages/login/register',
          title: '审核通过',
        },
        {
          icon: 'https://minio.wskjwl.com/uipicture/uploadreject.png',
          path: '/pages/login/register',
          title: '审核失败',
        },
        {
          icon: '../../static/my/audit-0.png',
          path: '/pages/login/register',
          title: '审核中',
        },
      ],
      submitObj: {},
      licensePermit: false,
      auditStatus: null,
      submitObjcertificatePic: '',
      carTypeList: [],
      driverSign: '',
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onShow() {
    this.getDictData('approve_car_type').then(() => {
      // if (!this.driverSign) {
      // }
    })
  },
  onLoad() {
    uni.$on('signature', (data) => {
      this.form.driverSign = data.img
      this.driverSign = data.showImg
    })
    this.getInfo()
  },
  watch: {
    'form.idcardNo'(val, old) {
      this.upperCase(val)
    },
  },
  methods: {
    //司机性别
    driverSexConfirm(val) {
      this.form.driverSexName = val[0].label
      this.form.driverSex = val[0].value
      this.triggerSingleFieldValidate('driverSex')
    },
    async getInfo() {
      const res = await this.$u.get('/freight-business/get/userInfo')
      if (res.code === '0') {
        uni.setStorageSync('userInfo', res.result)
        this.userInfo = res.result
        if (this.userInfo.driverInfo) {
          this.getDertailData()
        }
      } else {
        this.$api.msg(res.message)
      }
    },
    // 短信验证
    handleNoteAuth() {
      this.showAuthModal = false
      uni.navigateTo({
        url: '/pages/auth/sms',
      })
    },
    // 人脸识别
    async handleAuth() {
      this.showAuthModal = false
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightSsqInfo/personal/auth',
        {
          name: this.form.driverName,
          identity: this.form.idcardNo,
          type: 4,
        }
      )
      if (code === '0') {
        uni.setStorageSync('orderNo', result.orderNo)
        uni.navigateTo({
          url: `/pages/auth/webview?src=${encodeURIComponent(result.url)}`,
        })
      } else {
        this.$api.msg(message)
      }
    },
    handleGoSign() {
      if (this.auditStatus == null || this.auditStatus == 2) {
        uni.navigateTo({ url: '/pages/signature/index' })
      }
    },
    idcardDueAtBtn() {
      this.form.idcardDueAt = '2999-12-31'
    },
    licenseDueAtBtn() {
      this.form.licenseDueAt = '2999-12-31'
    },
    // 查询字典
    async getDictData(type) {
      const { code, result, message } = await this.$u.get(
        `/freight-auth/dictValue/type/${type}`
      )
      if (code === '0') {
        if (type == 'approve_car_type') {
          this.carTypeList = result.map((item) => {
            return {
              label: item.labelDefault,
              value: item.value,
            }
          })
        }
      } else {
        this.$api.msg(message)
      }
    },
    handleidcardDueAtConfirm(val) {
      this.form.idcardDueAt = val.year + '-' + val.month + '-' + val.day
    },
    handlelicenseDueAtConfirm(val) {
      this.form.licenseDueAt = val.year + '-' + val.month + '-' + val.day
    },
    //触发校验
    triggerSingleFieldValidate(refName) {
      setTimeout(() => {
        this.$refs[refName].onFieldChange()
      }, 100)
    },
    //审核存在判断
    toExamineIndexOf(val) {
      let tagFlag = undefined
      if (this.deletableTextList.indexOf(val) == -1) {
        tagFlag = false
      } else {
        tagFlag = true
      }
      return tagFlag
    },
    //字符串中小写转大写
    upperCase(str) {
      let arr = str.split('')
      let newStr = ''
      // 通过数组的forEach方法来遍历数组
      arr.forEach(function (value) {
        if (value >= 'a' && value <= 'z') newStr += value.toUpperCase()
        else newStr += value
      })
      this.form.idcard = newStr
    },
    //获取验证码
    getCode() {
      if (this.form.phone) {
        const intime = 60
        if (!this.timer) {
          this.count = intime
          this.show = false
          this.getCodeDisabled = true
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= intime) {
              this.count--
            } else {
              this.show = true
              this.getCodeDisabled = false
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
          this.getCodeData({
            type: '1',
            iphone: this.form.phone,
          })
        }
      } else {
        this.$api.msg('请先输入手机号码')
      }
    },
    // 发送短信验证码
    async getCodeData(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-auth/client/smsSend',
        val
      )
      if (code === '0') {
        this.$api.msg('短信验证已发送')
      } else {
        this.$api.msg(message)
      }
    },
    //车型选择
    fleetNameconfirm(val) {
      this.form.fleetName = val[0].label
      this.form.fleetId = val[0].value
    },
    //身份证正面
    idcardFrontPicsuccess(data, index, lists, name) {
      if (data.code == '0') {
        this.form.driverName = data.result.name
        this.form.idcardNo = data.result.idNumber
        this.form.idcardFrontPic = data.result.imgUrl
        this.triggerSingleFieldValidate('idcardNo')
        this.triggerSingleFieldValidate('driverName')
        this.idcardEditable = true
      } else {
        setTimeout(() => {
          this.$api.msg(data.message)
        }, 200)
        this.$refs.uUpload1.lists = []
      }
    },
    //身份证正面移除
    idcardFrontPicremove(index, lists) {
      this.form.idcardFrontPic = undefined
      this.idcardFrontPicremoveFlag = false
      this.idcardEditable = false
    },
    //身份证反面
    idcardBackPicsuccess(data, index, lists, name) {
      if (data.code == '0') {
        const search = '.'
        const replaceWith = '-'
        this.form.idcardBackPic = data.result.imgUrl
        this.form.idcardDueAt = data.result.validPeriod
          .substring(11)
          .split(search)
          .join(replaceWith)
        this.idcardBackEditable = true
      } else {
        setTimeout(() => {
          this.$api.msg(data.message)
        }, 200)
        this.$refs.uUpload2.lists = []
      }
    },
    //身份证反面移除
    idcardBackPicremove() {
      this.form.idcardBackPic = undefined
      this.idcardBackPicremoveFlag = false
      this.idcardBackEditable = false
    },
    //上传失败
    testerror(res, index, lists, name) {
      this.$api.msg('上传失败')
    },
    licensePermitConfirm(e) {
      this.form.licensePermit = e[0].value
      this.form.licensePermitLabel = e[0].label
    },
    //驾驶证正页	上传成功
    licenseFrontPicsuccess(data, index, lists, name) {
      if (data.code == '0') {
        this.form.licensePermit = this.carTypeList.filter(
          (item) => item.label == data.result.approvedType
        )[0]
          ? this.carTypeList.filter(
              (item) => item.label == data.result.approvedType
            )[0].value
          : ''
        // this.form.licensePermitLabel = this.carTypeList.filter(
        //   (item) => item.label == data.result.approvedType
        // )[0]
        //   ? this.carTypeList.filter(
        //       (item) => item.label == data.result.approvedType
        //     )[0].label
        //   : ''
        this.form.licenseFrontPic = data.result.imgUrl
        this.form.licenseIssue = data.result.issueAuthority
        this.form.licenseDueAt = data.result.validPeriod.split('至')[1]
        this.licenseFrontPicEditable = true
        this.triggerSingleFieldValidate('licenseIssue')
      } else {
        setTimeout(() => {
          this.$api.msg(data.message)
        }, 200)
        this.$refs.uUpload3.lists = []
      }
    },
    //驾驶证正页移除
    licenseFrontPicmove() {
      this.form.licenseFrontPic = undefined
      this.licenseFrontPicremoveFlag = false
      this.licenseFrontPicEditable = false
    },
    // 驾驶证副页上传
    licenseSubPicsuccess(data, index, lists, name) {
      if (data.code == '0') {
        this.form.licenseSubPic = data.result
        this.licenseSubPicEditable = true
      } else {
        setTimeout(() => {
          this.$api.msg(data.message)
        }, 200)
        this.$refs.uUpload4.lists = []
      }
    },
    //驾驶证副页移除
    licenseSubPicmove() {
      this.form.licenseSubPic = undefined
      this.licenseSubPicremoveFlag = false
      this.licenseSubPicEditable = false
    },
    // 从业资格证上传
    certificatePicsuccess(data, index, lists, name) {
      if (data.code == '0') {
        this.form.certificatePic = data.result
        this.certificatePicEditable = true
      } else {
        setTimeout(() => {
          this.$api.msg(data.message)
        }, 200)
        this.$refs.uUpload5.lists = []
      }
    },
    //从业资格证移除
    certificatePicremove() {
      this.form.certificatePic = undefined
      this.certificatePicremoveFlag = false
      this.certificatePicEditable = false
    },
    //提交
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.postData(this.form)
        } else {
          this.$api.msg('请填写相关信息')
        }
      })
    },
    // 提交数据
    postData(data) {
      let photoList = [
        'idcardFrontPic',
        'idcardBackPic',
        'licenseFrontPic',
        'licenseSubPic',
        'certificatePic',
        'driverSign',
      ]
      let tagShow = true
      photoList.forEach((item) => {
        if (!data[item] || data[item] == undefined) {
          tagShow = false
        }
      })
      let obj = {
        ...data,
      }
      this.submitObj = obj
      this.submitObjcertificatePic =
        httpEnum.baseImgUrl +
        '/logistics-control-platform/' +
        obj.certificatePic

      if (tagShow) {
        this.getuserInfo()
      } else {
        if (!this.form.idcardFrontPic) {
          return this.$api.msg('请上传身份证人像面')
        }
        if (!this.form.idcardBackPic) {
          return this.$api.msg('请上传身份证国徽面')
        }
        if (!this.form.licenseFrontPic) {
          return this.$api.msg('请上传驾驶证正页')
        }
        if (!this.form.licenseSubPic) {
          return this.$api.msg('请上传驾驶证副页')
        }
        if (!this.form.certificatePic) {
          return this.$api.msg('请上传从业资格证')
        }
        if (!this.form.driverSign) {
          return this.$api.msg('请填写电子签名')
        }
      }
    },
    // 注册提交
    async submitData(val) {
      const { code, message } = await this.$u.post(
        '/freight-business/freightDriver/driver/addByDriver',
        val
      )
      if (code === '0') {
        this.$api.msg('提交成功')
        this.auditStatus = 0
        this.getInfo()
        this.showAuthModal = true
      } else {
        this.$api.msg(message)
      }
    },
    // 注册提交
    async submitEditData(val) {
      const { code, message } = await this.$u.post(
        '/freight-business/freightDriver/driver/editByDriver',
        val
      )
      if (code === '0') {
        this.$api.msg('提交成功')
        this.auditStatus = 0
        this.getInfo()
        this.showAuthModal = true
      } else {
        this.$api.msg(message)
      }
    },
    getuserInfo() {
      this.showModal = true
      this.timer = setInterval(() => {
        this.confirmTime--
        if (this.confirmTime < 1) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    handleConfirm() {
      this.showModal = false
      this.confirmTime = 6
      let userInfo = uni.getStorageSync('userInfo')
      if (userInfo.driverInfo == null) {
        this.submitData(this.submitObj)
      }
      if (userInfo.driverInfo && userInfo.driverInfo.driverAuditStatus == 2) {
        this.submitEditData(this.submitObj)
      }
    },
    handleCancel() {
      this.confirmTime = 6
      clearInterval(this.timer)
      this.showModal = false
    },
    // 请求详情数据
    async getDertailData() {
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightDriver/driver/detail'
      )
      if (code === '0') {
        if (result) {
          this.auditStatus = result.auditStatus
          this.deletableTextList =
            result.auditRejectInfo && JSON.parse(result.auditRejectInfo)
          this.form.idcardFrontPic = result.idcardFrontPic
          this.form.idcardBackPic = result.idcardBackPic
          this.form.driverName = result.driverName
          this.form.idcardNo = result.idcardNo
          this.form.idcardDueAt = result.idcardDueAt
          this.form.licenseFrontPic = result.licenseFrontPic
          this.form.licenseSubPic = result.licenseSubPic
          this.form.licensePermit = result.licensePermit
          this.form.licensePermitLabel = result.licensePermitValue
          this.form.licenseDueAt = result.licenseDueAt
          this.form.licenseIssue = result.licenseIssue
          this.form.certificatePic = result.certificatePic
          this.form.driverId = result.driverId
          this.form.driverSign = result.driverSign
          this.form.driverSex = result.driverSex
          if (result.driverSex) {
            this.form.driverSexName = this.driverSexList.filter(
              (i) => i.value == result.driverSex
            )[0].label
          }
          this.driverSign =
            httpEnum.baseImgUrl +
            '/logistics-control-platform/' +
            result.driverSign
          this.$refs.uUpload5.lists = [
            {
              url:
                httpEnum.baseImgUrl +
                '/logistics-control-platform/' +
                result.certificatePic,
            },
          ]
          this.$refs.uUpload4.lists = [
            {
              url:
                httpEnum.baseImgUrl +
                '/logistics-control-platform/' +
                result.licenseSubPic,
            },
          ]
          this.$refs.uUpload3.lists = [
            {
              url:
                httpEnum.baseImgUrl +
                '/logistics-control-platform/' +
                result.licenseFrontPic,
            },
          ]
          this.$refs.uUpload2.lists = [
            {
              url:
                httpEnum.baseImgUrl +
                '/logistics-control-platform/' +
                result.idcardBackPic,
            },
          ]
          this.$refs.uUpload1.lists = [
            {
              url:
                httpEnum.baseImgUrl +
                '/logistics-control-platform/' +
                result.idcardFrontPic,
            },
          ]
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.register-box {
  background-color: rgb(238, 238, 239);
  padding: 8rpx 10rpx 16rpx;
  .colorFA6400 {
    color: #fa6400;
    font-size: 24rpx;
  }
  .top-box {
    justify-content: space-between;
    .width-50 {
      position: relative;
      .toexamine-box {
        position: absolute;
        bottom: 30rpx;
        left: 10rpx;
        color: white;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        font-size: 18rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 22rpx;
      }
    }
  }

  .width-100 {
    position: relative;
    .toexamine-box {
      position: absolute;
      bottom: 30rpx;
      right: 300rpx;
      color: white;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      font-size: 18rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 22rpx;
    }
  }
  .row-box {
    display: flex;
    margin-right: 16rpx;
  }
  .getCode-box {
    width: 100rpx;
  }
  .card-box {
    background: white;
    margin-top: 24rpx;
    border-radius: 10rpx;
    padding: 24rpx 24rpx 0;
    .u-flex {
      font-weight: 600;
    }
    .card-title-box {
      font-size: 28rpx;
      font-weight: 600;
    }
    .card-icon-box {
      margin-left: 6rpx;
      position: relative;
      view:nth-child(1) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #57a3ff;
        position: absolute;
        top: -12rpx;
        left: 10rpx;
        z-index: 1;
      }
      view:nth-child(2) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #add3ff;
        position: absolute;
        top: -6rpx;
        left: 20rpx;
      }
    }
  }
  .idcardDueAt-box {
    display: flex;
    align-items: center;
  }
  .uUpload1-box {
    /deep/.u-list-item {
      // background-image: url('https://minio.wskjwl.com/uipicture/shenfenzhengzheng.png');
      background-image: url('../../static/end.png');
      background-size: 50% 50%;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  .uUpload2-box {
    /deep/.u-list-item {
      // background-image: url('https://minio.wskjwl.com/uipicture/shenfenzheng2.png');
      background-image: url('../../static/front.png');
      background-size: 50% 50%;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  /deep/.u-add-tips[data-v-0d33af60] {
    margin-top: 150rpx;
  }
  /deep/.u-iconfont[data-v-6e20bb40]::before {
    display: none;
  }
}
.modal-content {
  padding: 0 30rpx;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    &-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #000000;
      line-height: 40rpx;
    }
    &-icon {
      width: 27rpx;
      height: 25rpx;
      margin-left: 4rpx;
    }
  }
  .section {
    margin-bottom: 32rpx;
  }
  .item {
    display: flex;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    &-name {
      white-space: nowrap;
    }
    &-img {
      width: 313rpx;
      height: 202rpx;
      object-fit: cover;
    }
  }
}
.slot-btn {
  position: relative;
  width: 296rpx;
  height: 222rpx;
  background: #ffffff;
  box-shadow: 0px 5rpx 20rpx 1px rgba(197, 202, 213, 0.25);
  border-radius: 4rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slot-img {
  width: 293rpx;
  height: 186rpx;
}
.sign-img {
  width: 325rpx;
  height: 240rpx;
}
.slot-name {
  position: absolute;
  font-size: 24rpx;
  color: #858b9c;
  line-height: 32rpx;
  bottom: 13rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}
.sign-icon {
  width: 112rpx;
  height: 112rpx;
}
.auth-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 20rpx;
}
.auth-item {
  display: flex;
  align-items: center;
  flex-direction: column;
}
</style>
